<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <title></title>
    <script src="jQuery/jquery-3.1.1.js"></script>
    <style>
        .div{
            width: 300px;
            height: 40px;
            background-color: #999;
            position: absolute;
            left: 40%;
        }
        span{
            display: inline-block;
            line-height: 40px;
            text-align: center;
        }
        span:nth-child(1){
            width: 100px;
            height: 40px;
            background-color: #3a6;
        }
        span:nth-child(2){
            width: 180px;
            height: 40px;
        }
        span:nth-child(2):hover{
            cursor: pointer;
        }        
        section{
            width: 200px;
            /*background-color: saddlebrown;*/
            position: absolute;
            left: 45.1%;
            top: 48px;
            border: 1px solid red;
        }
        section>div{
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px dotted brown; 
        }  
        section>div:hover{
            color: yellowgreen;
            cursor: pointer;
        }        
        .p{
            display: none;
        }      
    </style>    
</head>
<body>
    <div class="div">
        <span>选择项目</span>
        <span>未选择</span>
    </div>
    <section class="p">
        <div>html</div>
        <div>css</div>
        <div>js</div>
        <div>ajax</div>
    </section>
</body>
</html>
<script>
    $('.div>span:nth-child(2)').click(function(){
        console.log('asdas')
        $('section').removeClass('p');
    })
    $('section>div').each(function(index){
        $(this).click(function(){
            console.log($('section>div').eq(index).html())
            $('.div>span:nth-child(2)').html($('section>div').eq(index).html());
            $('section').addClass('p');
            
        })
    })
</script>